<template>
  <div>
    <div class="box">
      <div class="img">
        <img class="img1" src="../../assets/image/login.png" alt="" />
        <img class="img2" src="../../assets/image/orange.png" alt="" />
        <div class="inp">
          <el-input
            v-model="form.username"
            placeholder="请输入账号"
            width="100px"
            
          ></el-input>
          <el-input
            placeholder="请输入密码"
            v-model="form.password"
            show-password
          ></el-input>
          <el-button round class="btn" @click="submit()">登陆</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {login} from '../../requster/api'
import { successAlert, warningAlert } from "../../util/alter";
import {mapActions} from "vuex"
export default {
  data() {
    return {
      
        form:{
          username:"",
          password:"",
        }
     
    };
  },
  methods:{
    ...mapActions({
      reqchangeuser:"reqchangeuser"
    }),
    submit(){
      login(this.form).then(res=>{
        if (res.data.code==200) {
          successAlert(res.data.msg)
          // 存
          this.reqchangeuser(res.data.list)
          // 跳
          this.$router.push("/")
        } else {
          warningAlert(res.data.msg)
        }

      })
    }
  }
};
</script>

<style scoped lang="less">
@import url("../../less/index.less");

.box {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(@color1, @color2);
  position: relative;
  .img1 {
    width: 900px;
    height: 700px;
    position: absolute;
    right: 50px;
    bottom: 0;
  }
}

.img2 {
  width: 300px;
  height: 100px;
  position: absolute;
  right: 158px;
  top: 200px;
}
.inp {
  position: absolute;
  right: 158px;
  bottom: 60px;
  width: 300px;
  height: 300px;
}
.btn {
  margin-top: 20px;
  width: 300px;
  height: 40px;
}
</style>